<template>
  <view class="logistics-page">
    <!-- 物流信息卡片 -->
    <view class="logistics-card">
      <view class="card-header">
        <text class="card-title">物流信息</text>
      </view>
      <view class="logistics-info">
        <view class="company-info">
          <u-icon name="car-fill" color="#FF9500" size="20"></u-icon>
          <view class="company-details">
            <text class="company-name">物流公司 顺丰</text>
            <text class="tracking-number">物流单号 SKD35167634135</text>
          </view>
          <u-button 
            type="primary" 
            size="mini" 
            plain 
            @click="copyTrackingNumber"
            customStyle="
              margin-left: auto;
              width: 60px;
              height: 28px;
              line-height: 28px;
              font-size: 12px;
              padding: 0;
            "
          >复制</u-button>
        </view>
      </view>
    </view>

    <!-- 物流进度条 -->
    <view class="progress-card">
      <view class="card-header">
        <text class="card-title">物流进度</text>
      </view>
      <u-steps 
        direction="column" 
        :current="currentStep" 
        active-color="#FF9500"
        dot
      >
        <u-steps-item 
          v-for="(step, index) in steps" 
          :key="index"
          :title="step.title" 
          :desc="step.time"
          :icon="index === 0 ? 'bell-fill' : ''"
        >
          <view slot="icon" class="custom-icon" v-if="index <= currentStep && index !== 0">
            <u-icon name="checkmark" color="#fff" size="12"></u-icon>
          </view>
        </u-steps-item>
      </u-steps>
    </view>

    <!-- 为你推荐 -->
    <view class="recommend-section">
      <view class="section-header">
        <text class="section-title">为你推荐</text>
      </view>
      <view class="product-grid">
        <view 
          v-for="(product, index) in recommendedProducts" 
          :key="index" 
          class="product-item"
        >
          <image 
            :src="product.image" 
            class="product-image" 
            mode="aspectFill"
          ></image>
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">¥{{ product.price }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0, // 当前物流步骤
      steps: [
        {
          title: "您的订单已到达[深圳宝安分拨中心]",
          time: "2019-12-24 15:58",
          isCurrent: true
        },
        {
          title: "您的订单已到达[广州增城分拨中心]",
          time: "2019-12-24 11:15"
        },
        {
          title: "配送员李伟已揽收完成",
          time: "2019-12-23 16:23"
        },
        {
          title: "第三方卖家已开始拣货",
          time: "2019-12-23 12:15"
        },
        {
          title: "您提交了订单，请等待卖家发货",
          time: "2019-12-23 10:23"
        }
      ],
      recommendedProducts: [
        {
          image: "/static/swy/p10.jpg",
          name: "钩花蕾丝衬衣",
          price: 371
        },
        {
          image: "/static/swy/p10.jpg",
          name: "时尚甜美蕾丝短袖衬衣",
          price: 236
        },
        {
          image: "/static/swy/p10.jpg",
          name: "优雅时尚露肩衬衣",
          price: 97
        },
        {
          image: "/static/swy/p0.jpg",
          name: "小清新喇叭袖针织衫",
          price: 313
        }
      ]
    };
  },
  methods: {
    copyTrackingNumber() {
      uni.setClipboardData({
        data: 'SKD35167634135',
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.logistics-page {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.logistics-card, .progress-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.company-info {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.company-details {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
  flex: 1;
}

.company-name {
  font-size: 15px;
  color: #333;
  margin-bottom: 5px;
}

.tracking-number {
  font-size: 14px;
  color: #666;
}

.custom-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #FF9500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recommend-section {
  margin-top: 20px;
}

.section-header {
  margin-bottom: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.product-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.product-image {
  width: 100%;
  height: 160px;
}

.product-name {
  display: block;
  padding: 8px;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  display: block;
  padding: 0 8px 8px;
  font-size: 14px;
  color: #FF5500;
  font-weight: bold;
}
</style>